<template>
	<view class="type" :style="{paddingTop: paddingHeight + 'px'}">
		<nav-bar :title="params.title" backgroundColor="#FAFAFA"></nav-bar>
		<view class="container">
			<view class="date_h">
				<view class="date_m">
					<text>{{ searchTime }}</text>
				</view>
			</view>
			<view class="intake">
				<view class="type">
					<text class="t_txt">热量</text>
					<text class="t_data"><text>{{ intakeInfo.heat ? intakeInfo.heat : '0'}}</text> <text
							style="padding-left: 8rpx;">千卡</text></text>
				</view>
				<view class="type bg2">
					<text class="t_txt">碳水化合物</text>
					<text class="t_data"><text>{{ intakeInfo.carbohydrate ? intakeInfo.carbohydrate : '0'}}</text>
						<text style="padding-left: 8rpx;">克</text></text>
				</view>
				<view class="type bg3">
					<text class="t_txt">蛋白质</text>
					<text class="t_data"><text>{{ intakeInfo.protein ? intakeInfo.protein : '0'}}</text> <text
							style="padding-left: 8rpx;">克</text></text>
				</view>
				<view class="type bg4">
					<text class="t_txt">脂肪</text>
					<text class="t_data"><text>{{ intakeInfo.fat ? intakeInfo.fat : '0'}}</text> <text
							style="padding-left: 8rpx;">克</text></text>
				</view>
			</view>
			<view class="cell" v-for="(item,index) in dataList" :key="index" @click="goDetails(item.id)">
				<u-image width="64rpx" height="64rpx" :src="foodOptions[item.type - 1].url" :showMenuByLongpress="false"
					:lazy-load="true"></u-image>
				<view class="m_m">
					<text>{{ item.foodName }}</text>
					<text>{{ item.heat }}千卡</text>
				</view>
				<text class="iconfont icon-arrow_rigth"></text>
			</view>
		</view>
		<view class="large_button" @click="goAdd">添加食物</view>
	</view>
</template>

<script>
	import {
		findOneMealDietary,
		findMealDietaryIntake
	} from '@/api/index.js'
	export default {
		data() {
			return {
				paddingHeight: uni.getStorageSync('navbarHeight'),
				userId: uni.getStorageSync("userId"),
				foodOptions: [{
						type: 1,
						text: '早餐',
						url: 'http://oss.antaimedical.com/images/static/2024/06/666d2d82eb14d0f049f44d10SHWGWuFnaicz89e2b5a5e367116195a1ccb6fd388b5e.png',
						n_url: 'http://oss.antaimedical.com/images/static/2024/06/666d2d9beb14d0f049f44d11pfoT28ge2U5j83b6bac5c70285018853a23e4f457d1d.png',
						isNull: false
					},
					{
						type: 2,
						text: '午餐',
						url: 'http://oss.antaimedical.com/images/static/2024/06/666d2da8eb14d0f049f44d12QtVILwrXeGxT7601bbc78ffc1c125f94fbfd12e2059a.png',
						n_url: 'http://oss.antaimedical.com/images/static/2024/06/666d2db9eb14d0f049f44d13a4TMncFa70zz6abab4a9a135072f6efd839191d856d9.png',
						isNull: false
					},
					{
						type: 3,
						text: '晚餐',
						url: 'http://oss.antaimedical.com/images/static/2024/06/666d2dc7eb14d0f049f44d141LkjGm39exK8375348fde4233be42db7f160fc5e5a41.png',
						n_url: 'http://oss.antaimedical.com/images/static/2024/06/666d55d2eb14d0f049f44d1cHV85sexvsId1121fc1bad39599b80682e79792bd3e8b.png',
						isNull: false
					},
					{
						type: 7,
						text: '加餐',
						url: 'http://oss.antaimedical.com/images/static/2024/06/666d2dd2eb14d0f049f44d15rSlqyPcuVOoy1a6e8ea37f41b6d786a20591cdd8e6e9.png',
						n_url: 'http://oss.antaimedical.com/images/static/2024/06/666d2ddfeb14d0f049f44d16AnQ1hFOKvPy06fb46fbe79e0caf2ad54083e20ec2401.png',
						isNull: false
					},
				],
				params: undefined,
				searchTime: '',
				dataList: [],
				intakeInfo: {} // 飲食摄入量数据
			}
		},
		onLoad(OPTIONS) {
			console.log(OPTIONS);
			this.params = JSON.parse(OPTIONS.params)
			this.searchTime = OPTIONS.time
		},
		onShow() {
			this.fetchData()
		},
		methods: {
			async fetchData() {
				uni.showLoading({
					title: '加载中...'
				})
				let params = {
					id: this.params.mealId
				}
				try {
					const res = await findOneMealDietary(params)
					const res_2 = await findMealDietaryIntake(params)
					if (res.code == 200 && res_2.code == 200) {
						this.dataList = res.data
						this.intakeInfo = res_2.data
					}
				} catch (e) {
					//TODO handle the exception
				}
				uni.hideLoading()
			},
			goDetails(id) {
				uni.navigateTo({
					url: `/pagesA/health/diet/food?id=${id}&type=update`
				})
			},
			goAdd() {
				uni.navigateTo({
					url: `/pagesA/health/diet/food?type=add&params=${JSON.stringify(this.params)}`
				})
			}
		}
	}
</script>


<style lang="scss">
	page {
		background-color: #FAFAFA;
		min-height: 100%;
	}
</style>
<style lang="scss" scoped>
	.type {
		.container {
			padding: 0 48rpx 48rpx;

			.date_h {
				padding: 48rpx 0;

				.date_m {
					background-color: #545DDE;
					font-size: 24rpx;
					color: #fff;
				}
			}

			.cell {
				width: 100%;
				height: 130rpx;
				margin-top: 16rpx;
				padding: 0 32rpx;
				background-color: #fff;
				border-radius: 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.m_m {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 32rpx 0 16rpx;
					color: #666666;
					font-size: 28rpx;
				}

				.icon-arrow_rigth {
					color: rgba(#666666, .5);
					padding-right: 16rpx;
				}
			}
		}

		.large_button {
			position: fixed;
			bottom: 76rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>